let nowpage = 1, pagesize = 5, total = 0;
let uphoto = null; // 头像file对象
let jobs = []
let tabalData = []

let searchStatus = false;
window.onload = function () {
  // console.log($.ajax);
  // 获取职称数据
  $.ajax({
    url: "/getJobs",
    type: 'get',
    success: function (res) {
      console.log(res)
      if (res.code === 200) {
        jobs = res.data;
        let jname = $('#jname');
        let jname2 = $("#jid")
        let jname3 = $("#jid3")
        jname.html('');
        jname2.html('');
        jname3.html('');
        let strHtml = '<option value="0" disabled selected>请选择职称</option>';

        res.data.forEach(el => {
          strHtml += `<option value="${el.jid}">${el.jname}</option>`;
        });
        jname.html(strHtml);
        jname2.html(strHtml);
        jname3.html(strHtml);

      }

    }
  })

  // 获取默认一页的数据
  getDoctors(nowpage, pagesize);
}
// 案例： 多条件查询，

const searchHandler = (nowpage, pagesize) => {
  let dname = $("#dname").val().trim();
  let jid = $("#jname").val();
  let dsex = $("#dsex").val();
  // console.log(dname, jname, dsex)

  if (!dname && !jid && !dsex) {
    alert('不能输入空格！请输入或选择一个查询条件')
    return;
  }

  searchStatus = true;

  $.ajax({
    url: '/searchDoctors',
    type: 'get',
    data: { dname, jid, dsex, nowpage, pagesize },
    success(res) {
      console.log(res)
      let doctorTable = $("#doctorTable")
      doctorTable.html('');
      let trHtml = "";
      tabalData = res.data;
      tabalData.forEach((el, index) => {
        trHtml += `<tr>
              <td>${index + 1}</td>
              <td>${el.dname}</td>
              <td>${el.jname}</td>
              <td>${el.dsex}</td>
              <td>${el.dsid}</td>
              <td>${el.dtel}</td>
              <td>${el.dfeaturs}</td>
              <td>
                <button type="button" data-id="${el.did}" class="btn btn-sm btn-info btn-look">查看</button>
                <button type="button" data-id="${el.did}" class="btn btn-sm btn-warning btn-edit">编辑</button> 
                <button type="button" data-id="${el.did}" class="btn btn-sm btn-danger btn-delete">删除</button>   
              </td>
            </tr>`;
      })
      doctorTable.html(trHtml);

      // 分页：
      $("#myPage").hide()
      $("#myPage2").show()

      // 分页的动态渲染


    }

  })
}

// 搜索按钮绑定单击事件
$("#searchBtn").on('click', function () {
  nowpage = 1;
  searchHandler(nowpage, pagesize)
});

// 添加医生，显示添加的modal界面：
$("#addJobBtn").click(function () {
  console.log($("#addDoctorModal"))
  $("#addDoctorModal").modal('show');
})

// 创建医生
$(".btn-add").click(function () {
  console.log("6666")
  let dname = $("#dname2").val();
  let dsid = $("#dsid").val();
  let dsex = $("#dsex2").val();
  let dfeaturs = $("#dfeaturs").val();
  let jid = $("#jid").val();
  let dtel = $("#dtel").val()

  let flag = true;
  // 验证表单

  if (flag === false) return;


  // 创建FormData()对象，把这个对象，做参数的数据对象，传给后端
  let formdata = new FormData()
  formdata.append('dname', dname);
  formdata.append('dsid', dsid);
  formdata.append('dsex', dsex)
  formdata.append('dfeaturs', dfeaturs)
  formdata.append('jid', jid);
  formdata.append('dtel', dtel)
  if (uphoto !== null) {
    formdata.append('dphoto', uphoto)
  }
  // 原生AJAX写法
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/addDoctor', true)
  // xhr.setRequestHeader('content-type', 'multipart/form-data')  //不能写！
  xhr.send(formdata) //还是传formData对象做参数！！
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status === 200) {
      let res = JSON.parse(xhr.responseText);
      if (res.code === 200) {
        alert('添加成功')
        $("#addDoctorModal").modal('hide');
      } else {
        alert('添加失败')
      }
    }
  }
  // jQuery.ajax()写法：
  /* 
      $.ajax({
        url: '/addDoctor',
        type: 'post',
        data: formdata, // formdata里面已经有key:value这些数据
        contentType: false, //不做编码变化
        processData: false, //不转化数据格式
        success(res) {
          console.log(res)
          if (res.code === 200) {
            $("#addDoctorModal").modal('hide');
  
            // 调用获取一页医生信息的接口，再渲染表格和分页。
  
          } else {
            alert('添加失败')
          }
        },
        fail(err) {
          console.log(err)
          console.log("fail")
        }
      })
  
   */
})


// 添加医生里面的文件上传，头像选择功能
$("#dphoto").change(function () {
  console.log(this.files[0])
  if (!this.files[0]) {
    uphoto = null;
    return;
  };
  uphoto = this.files[0]
  // 文件类型和文件大小的判断
  // 。。。
  let userphoto = $('.userphoto')

  // 本地图片的预览：
  let filereader = new FileReader();

  // 当编码转换结束后，触发的事件
  filereader.onload = function () {
    // console.log(filereader.result)
    userphoto.attr('src', filereader.result)
  }
  // 把文件对象，转为base64编码的字符串
  filereader.readAsDataURL(uphoto);
});

// 获取默认的医生数据
const getDoctors = function (nowpage, pagesize) {
  searchStatus = false;
  $.ajax({
    url: "/getDoctors",
    type: 'get',
    data: { nowpage, pagesize },
    success(res) {
      if (res.code === 200) {
        tabalData = res.data;
        renderTable(tabalData, "#doctorTable")  // 渲染表格
        let _total = Math.ceil(res.count / pagesize) //计算总页数
        // 分页：
        $("#myPage").show()
        $("#myPage2").hide()
        renderPagation_1(_total, '#myPage .pagination') //动态创建分页
      }
    }
  })
}

// 默认渲染表格
const renderTable = (arr, selecter) => {
  let doctorTable = $(selecter)
  doctorTable.html('');
  let trHtml = "";
  arr.forEach((el, index) => {
    trHtml += `<tr>
              <td>${index + 1}</td>
              <td>${el.dname}</td>
              <td>${getJobNameByJid(el.jid)}</td>
              <td>${el.dsex}</td>
              <td>${el.dsid}</td>
              <td>${el.dtel}</td>
              <td>${el.dfeaturs}</td>
              <td>
                <button type="button" data-id="${el.did}" class="btn btn-sm btn-warning btn-edit">编辑</button> 
                <button type="button" data-id="${el.did}" class="btn btn-sm btn-danger btn-delete">删除</button>   
              </td>
            </tr>`;
  })
  doctorTable.html(trHtml);
}

// 从职称数据jobs里面，通过     jid 查找并返回 jname ，用于表格里面渲染职称，（如果后端值返回了医生数据，没有带职称数据时，要单独查询）
const getJobNameByJid = (jid) => {
  let jname = ''
  jobs.forEach(el => {
    if (el.jid === jid) {
      jname = el.jname
    }
  })
  return jname;
}

/*
渲染默认的分页的函数
@params {Number} total 总页数
@params {String} selecter 各种选择器
*/
const renderPagation_1 = (total, selecter) => {
  // 分页的动态渲染
  let pageDom = $(selecter)
  pageDom.html('')
  let liHtml = '';
  for (let i = 1; i <= total; i++) {
    // console.log(nowpage == i)
    liHtml += `<li class="page-item ${nowpage == i ? 'active' : ''}" aria-current="page">
              <span class="page-link">${i}</span>
            </li>`;
  }
  pageDom.html(liHtml)
}

// 默认分页事件委托
$('#myPage').on('click', '.page-item', function () {
  // console.log(this) // li
  nowpage = Number(this.innerText)
  getDoctors(nowpage, pagesize)
})

$('#myPage2').on('click', '.page-item', function () {
  // console.log(this) // li
  nowpage = Number(this.innerText)
  // getDoctors(nowpage, pagesize)
  // 调用搜索功能的函数
})


// 编辑医生信息事件绑定
$(document).on('click', '.btn-edit', function () {
  // alert('edit')
  let did = Number($(this).attr('data-id'));

  let temp = tabalData.filter(item => item.did === did)
  let obj = temp[0]
  console.log(obj)

  $("#did").val(obj.did)
  $("#dname3").val(obj.dname)
  $("#dsid3").val(obj.dsid)
  $("#dtel3").val(obj.dtel)
  $("#dsex3").val(obj.dsex)
  $("#dfeaturs3").val(obj.dfeaturs)
  $("#jid3").val(obj.jid)
  if (obj.dphoto) {
    $(".userphoto_3").attr('src', '/uploads/' + obj.dphoto)
  }
  $("#addDoctorModal_2").modal('show');
});

// 修改医生里面的文件上传，头像选择功能
$("#dphoto3").change(function () {
  // console.log(this.files[0])
  let userphoto = $('.userphoto_3')
  if (!this.files[0]) {
    uphoto = null;
    // userphoto.attr('src', '')
    userphoto.hide()

    return;
  };
  uphoto = this.files[0]
  // 文件类型和文件大小的判断
  // 。。。


  // 本地图片的预览：
  let filereader = new FileReader();

  // 当编码转换结束后，触发的事件
  filereader.onload = function () {
    // console.log(filereader.result)
    userphoto.show()
    userphoto.attr('src', filereader.result)
  }
  // 把文件对象，转为base64编码的字符串
  filereader.readAsDataURL(uphoto);
});


// 保存医生信息的修改
$('.btn-add-3').click(function () {
  let did = $("#did").val();
  let dname = $("#dname3").val();
  let dsid = $("#dsid3").val();
  let dtel = $("#dtel3").val();
  let dsex = $("#dsex3").val();
  let dfeaturs = $("#dfeaturs3").val();
  let jid = $("#jid3").val();
  // uphoto 
  let formdata = new FormData()
  formdata.append('did', did)
  formdata.append('dname', dname)
  formdata.append('dsid', dsid)
  formdata.append('dtel', dtel)
  formdata.append('dsex', dsex)
  formdata.append('dfeaturs', dfeaturs)
  formdata.append('jid', jid)
  if (uphoto) {
    formdata.append('dphoto', uphoto)
  }

  // 原生
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/updateDoctor', true)
  // xhr.setRequestHeader()
  xhr.send(formdata);

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let text = xhr.responseText;
      let res = JSON.parse(text);
      if (res.code === 200) {
        alert('修改成功')
        $("#addDoctorModal_2").modal('hide')
        // document.myform2.reset() // 重置表单。


        // 通过一个开关，来判断修改成功后，调用哪一个函数
        if (searchStatus === true) {
          //重新搜索更新后的数据
          searchHandler(nowpage, pagesize)
        } else {
          // 重新获取一页默认的数据
          getDoctors(nowpage, pagesize);
        }

      } else {
        alert('修改失败')
      }
    }
  }


});
// 删除医生信息事件绑定
$(document).on('click', '.btn-delete', function () {
  alert('delete')
})